﻿
@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}

@(Html.Kendo().Notification()
    .Name("notification")
    .Position(p => p.Pinned(true).Bottom(40).Right(30))
    .Stacking(NotificationStackingSettings.Down)
    .HideOnClick(true)
    .Animation(a=>a.Open(e=>e.SlideIn(SlideDirection.Left)))
    .Templates(t =>
    {
        t.Add().Type("info").ClientTemplateID("emailTemplate");
        t.Add().Type("error").ClientTemplateID("errorTemplate");
        t.Add().Type("upload-success").ClientTemplateID("successTemplate");
    })
)

<div class="demo-section">

    <h3>Show notification:</h3>
    <p>
        <button id="showEmailNotification" class="k-button">Email Notification</button><br />
        <button id="showErrorNotification" class="k-button">Error Notification</button><br />
        <button id="showSuccessNotification" class="k-button">Upload Success Notification</button>
    </p>
    <h3>Hide notification:</h3>
    <p>
        <button id="hideAllNotifications" class="k-button">Hide All Notifications</button>
    </p>

</div>

<script id="emailTemplate" type="text/x-kendo-template">
    <div class="new-mail">
        <img src="../../../content/web/notification/envelope.png" />
        <h3>#= title #</h3>
        <p>#= message #</p>
    </div>
</script>

<script id="errorTemplate" type="text/x-kendo-template">
    <div class="wrong-pass">
        <img src="../../content/web/notification/error-icon.png" />
        <h3>#= title #</h3>
        <p>#= message #</p>
    </div>
</script>

<script id="successTemplate" type="text/x-kendo-template">
    <div class="upload-success" style="height:100px;width:382px;padding-left:30px;">
        <img src="../../content/web/notification/success-icon.png" style="float:left;margin-top:32px" />
        <div style="float:left;height:100px;line-height:100px;margin-left:10px"> #= message #</div>
        <span class="messageClose" >×</span>
    </div>
</script>

<script>
    $(document).ready(function () {
    
        var notification = $("#notification").data("kendoNotification");
       // var kendo=new Object();
        kendo.alert= function(message) {
            notification.show({
                message: message
            }, "upload-success");
        };
	    $("#showEmailNotification").click(function () {
            //notification.show({
            //    title: "New E-mail",
            //    message: "You have 1 new mail message!"
            //}, "info");
            kendo.alert("哈哈哈");
        });

        $("#showErrorNotification").click(function () {
            notification.show({
                title: "Wrong Password",
                message: "Please enter your password again."
            }, "error");
        });

        $("#showSuccessNotification").click(function () {
            notification.show({
                message: "更新成功！"
            }, "upload-success");
        });

        $("#hideAllNotifications").click(function () {
            notification.hide();
        });

    });
</script>

<style>
    .demo-section {
        width: 200px;
        padding: 20px 30px;
    }

        .demo-section p {
            margin: 3px 0 20px;
            line-height: 40px;
        }

        .demo-section .k-button {
            width: 200px;
        }

    .k-notification {
        border: 0;
    }


    /* Info template */
    .k-notification-info.k-group {
        background: rgba(0%,0%,0%,.7);
        color: #fff;
    }

    .new-mail {
        width: 300px;
        height: 100px;
    }

        .new-mail h3 {
            font-size: 1em;
            padding: 32px 10px 5px;
        }

        .new-mail img {
            float: left;
            margin: 30px 15px 30px 30px;
        }

    /* Error template */
    .k-notification-error.k-group {
        background: rgba(100%,0%,0%,.7);
        color: #ffffff;
    }

    .wrong-pass {
        width: 300px;
        height: 100px;
    }

        .wrong-pass h3 {
            font-size: 1em;
            padding: 32px 10px 5px;
        }

        .wrong-pass img {
            float: left;
            margin: 30px 15px 30px 30px;
        }

    /* Success template */
    .k-notification-upload-success.k-group {       
        background: rgba(0%,60%,0%,.7);
        color: #fff;
    }

    .messageClose {
        margin: 2px 2px 0 0;
        float: right;
        font-size:24px
    }
    .messageClose:hover {
        background: rgba(0, 153, 0, 0.2);
        cursor: pointer;
    }
    /*.upload-success {
        width: 382px;
        height: 106px;
        padding: 0 30px;
        line-height: 106px;
    }*/

        /*.upload-success h3 {
            font-size: 1.7em;
            font-weight: normal;
            display: inline-block;
            vertical-align: middle;
           
        }*/

        /*.upload-success img {
            display: inline-block;
            vertical-align: middle;
            margin-right: 10px;
        }*/
</style>

